// import React from "react";
import React from "./react";

class Button extends React.Component{
    componentDidMount(){
      console.log('button componentDidMount');
    }
    componentWillMount(){
      console.log('button componentWillMount');
    }
    render(){
      console.log('button render');
      return (
        <button name={this.state.name} title={this.props.title}>{this.state.number}</button>
      );
    }
}

const counterWrapper = OldComponent =>{

  return class NewButton extends OldComponent{
    state={number:0}
    componentDidMount(){
      super.componentDidMount()
    }
    componentWillMount(){
      super.componentWillMount()
    }
    handleClick= ()=>{
      this.setState({number:this.state.number+1})
    }
    render(){
     console.log('newButton render');
     let renderElement = super.render()
     let newProps = {
      ...renderElement.props,
      ...this.state,
      onClick:this.handleClick
     }
     return React.cloneElement(
      renderElement,
      newProps,
      this.state.number
     )
    }
  }

}

let Counter = counterWrapper(Button)
export default Counter